import React,{ useEffect, useState } from 'react'
import Hello from "./component/Hello"
/**  
 *    函数组件中 Hooks 都是 可以写 多个的
 *  useEffect 
 *      可以让函数组件 实现 类组件生命周期的功能
 *      componentDidMount  操作真实dom / 数据请求
 *      componentDidUpdate  操作真实 dom / 数据请求
 *      componentWillUnmount  卸载钩子  清除实例 / 事件 / 计时器定时器
 *  参数 2 个：
 *      第一个参数 是一个回调函数，用于执行操作逻辑
 *      第二个参数 是一个可选参数，它的类型一个数组
 *          没有  第二个参数  表示监听所有数据的变化 【props， state】
 *          [] 空数组，就 执行一次，相当于 componentDidMount 钩子函数
 *          [count]  执行多次，表示对 count 数据的监听，这个时候它相当于 componentDidMount + componentDidUpdate
 *      第一个参数 有返回值，返回值是一个回调函数
 *          表示组件被卸载
 */

export default function LayOut() {
    const [count, setCount] = useState(0)
    const [val, setVal] = useState('')
    const [flag, setFlag] = useState(true)
     useEffect(() => {
         console.log("执行")
        //  document.querySelector("p").style.background = "red"
     }, [count]) 

     function add() {
         setCount(a => ++a)
     }

    //  useEffect(() => {})  // 初始化执行一次，监听所有的 props，state，然后执行
    //  useEffect(() => {}, [])  // 执行一次 类似 componentDidMount
    //  useEffect(() => {}, [count])  // 监听 count 的变化 componentDidMount + componentDidUpdate
    //  useEffect(() => {}, [count, val])  // 监听 count, val 的变化 componentDidMount + componentDidUpdate
    //  useEffect(() => {
    //      return () => {}    //  表示 卸载
    //  }, [count, val])  
     
  
  return (
    <div>
        <button onClick={add}> 改变 count </button>
        <p> {count} </p>
        <hr />
        <input type="text" value={val} onChange={(e) => {setVal(e.target.value)}} />

        <hr />
        <button onClick={() => setFlag(a => !a)}> 切换 hello 组件 </button>
        {
            flag && <Hello />
        }
    </div>
  )
}
